<template>
  <div>
    <!-- 筛选器 -->
    <el-form :model="filterValue">
      <el-form-item
        v-for="conf in filterConf"
        :key="conf.formField"
        label-width="100px"
        :label="conf.label"
      >
        <el-checkbox-group v-model="filterValue[conf.formField]">
          <el-checkbox
            v-for="department in filter[conf.dataField]"
            :key="department.id"
            :label="department.id"
          >
            {{ department.name }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <custom-table
      :current-page.sync="pageInfo.page"
      :page-size.sync="pageInfo.pageSize"
      :table-props="{
        size: 'mini',
        border: true,
      }"
      :data="list.rows"
      :total="list.total"
      :columns="columns"
      @update:currentPage="onPageChange"
      @update:pageSize="onPageSizeChange"
    >
      <template v-slot="{ row, col, data }">
        {{ row + col + data }}
      </template>
    </custom-table>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { FILTER_CONF, COLUMNS_CONF } from './constants'

export default {
  data() {
    return {
      filterConf: FILTER_CONF,
      columns: COLUMNS_CONF,
      // 筛选器的值
      filterValue: {
        departmentChecks: [],
        providentFundChecks: [],
        socialSecurityChecks: []
      },
      pageInfo: {
        page: 1,
        pageSize: 10
      }
    }
  },
  computed: {
    ...mapState([
      'departmentList',
    ]),
    ...mapState('social-security', [
      'list',
      'cityList',
    ]),
    filter() {
      return {
        cityList: this.cityList,
        departmentList: this.departmentList
      }
    }
  },
  watch: {
    filterValue: {
      handler(newValue) {
        console.log(newValue)
        // 发请求
      },
      // 深度监听
      deep: true
    }
  },
  methods: {
    ...mapActions('social-security', [
      'updateList',
      'updateCityList',
    ]),
    ...mapActions([
      'updateDepartmentList'
    ]),
    // 页数改变时
    onPageChange(current) {
      this.updateList({
        ...this.filterValue,
        ...this.pageInfo,
        page: current
      })
    },
    // 页码改变时
    onPageSizeChange(size) {
      this.page.current = 1
      this.updateList({
        ...this.filterValue,
        ...this.pageInfo,
        pageSize: size
      })
    }
  },
  created() {
    // 请求城市列表
    this.updateCityList()
    // 请求部门列表
    this.updateDepartmentList()
    // 请求表格列表
    this.updateList({
      ...this.filterValue,
      ...this.pageInfo
    })
  }
}
</script>

<style lang="scss" scoped>

</style>
